<template>
  <div>
    <van-cell-group
      label-width="5.5em"
      label-margin-right="2em"
      label-align="left"
      gutter="20px"
    >
      <template v-for="field in newFormData.fieldVals">
        <template v-if="!field.is_show_edit_form">
          <template v-if="field.type === 'char'">
            <x-input
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              type="text"
              :required="field.required && true || false"
              value-text-align="left"
              :readonly="field.readonly"
            />
          </template>
          <template v-else-if="field.type === 'date'">
            <datetime
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              :required="field.required || false"
            />
          </template>
          <template v-else-if="field.type === 'datetime'">
            <datetime
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              format="YYYY-MM-DD HH:mm"
              :required="field.required || false"
            />
          </template>
          <template v-else-if="field.type === 'many2one'">
            <Many2one
              :key="field.type"
              :title="field.title"
              :value.sync="field.value"
              :field="field"
              :readonly="field.readonly"
              :options_default.sync="field.options"
            />
          </template>
          <template v-else-if="field.type === 'boolean'">
            <x-switch
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              :required="field.required || false"
              :readonly="field.readonly"
            />
          </template>
          <template v-else-if="field.type === 'integer'">
            <x-number
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              button-style="round"
              :readonly="field.readonly"
              :required="field.required || false"
            />
          </template>
          <template v-else-if="field.type === 'float'">
            <x-input
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              type="number"
              :required="field.required && true || false"
              value-text-align="left"
              :readonly="field.readonly"
            />
          </template>
          <template v-else-if="field.type === 'selection'">
            <selector
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              :options="field.options"
              :readonly="field.readonly"
              :required="field.required || false"
            />
          </template>
          <template v-else-if="field.type === 'text'">
            <x-textarea
              :key="field.type"
              v-model="field.value"
              :title="field.title"
              :readonly="field.readonly"
              :required="field.required || false"
            />
          </template>
          <template v-else-if="field.type === 'Html'" />
          <template v-else-if="field.type === 'Binary'" />
          <template v-else-if="field.type === 'Many2many'" />
        </template>
      </template>
      <van-cell-group gutter="20px">
        <van-cell-group />
        <van-row>
          <van-col>
            <van-button
              type="warn"
              @click.native="cancel"
            >
              取消
            </van-button>
          </van-col>
          <van-col>
            <van-button
              type="primary"
              @click.native="saveForm"
            >
              保存
            </van-button>
          </van-col>
        </van-row>
      </van-cell-group>
    </van-cell-group>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  // import Char from './OdooFieldChar.vue'
  import Many2one from '../fields/FieldMany2one.vue'

  export default {
  name: 'TreeForm',
  components: {
    // Panel,
    // Char,
    // Row,
    // Col,
    // Box,
    // Button,
    // PopupRadio,
    Many2one
    // GroupTitle,
    // Field,
    // Picker,
    // DatetimePicker,
    // Stepper,
    // Cell,
    // CellGroup,
    // Switch
  },
  props: { 'allFormData': { type: Object, default () { return {} } }, 'model': { type: String, default: '' }, id: { type: String, default: '' } },
  data: function () {
    return {
      newFormData: {}
    }
  },
  computed: {
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      isLoading: state => state.vux.isLoading,
      vux: state => state.vux
    })
  },

  watch: {
    allFormData: {
      handler: function (val, oldVal) {
        this.newFormData = []
        this.newFormData = JSON.parse(JSON.stringify(val))
      },
      deep: true
    }
  },
    mounted: function () {
  },
  methods: {
    saveForm: function () {
      // this.allFormData = this.newFormData
      this.$emit('save', this.newFormData)
    },
    cancel: function () {
      // this.newFormData = []
      this.$emit('cancel', this.newFormData)
    },
    getTreeRowFooter: function () {
      return {
        title: '添加'
      }
    },
    actionSheetFunction: function (itemIndex, items) {

    },
    treeRowClick: function (field) {
    }
  }
}
</script>

<style >
  .custom-primary-red {
    border-radius: 99px !important;
    border-color: #CE3C39 !important;
    color: #CE3C39 !important;
    &:active {
      border-color: rgba(206, 60, 57, 0.6) !important;
      color: rgba(206, 60, 57, 0.6) !important;
      background-color: transparent;
    }
  }
</style>
